var amount = 0;//满足条件的学生数量
var text = null;
var url = "/teacher/GetStudentFullsServlet?";
var vm = new Vue({
    el:'#searchIfo',
    data:{
        shield: false,
        header:[{
            name: '姓名',
            candidateNumber: '考生号',
            academy: '学院',
            class: '类别',
            major: '专业',
            more: '更多'
        }],
        text:[],
    },
    methods:{
        resetClick(){
            document.getElementById('area').selectedIndex = 0;
            document.getElementById('academy').selectedIndex = 0;
            document.getElementById('class').selectedIndex = 0;
            document.getElementById('sex').selectedIndex = 0;
            document.getElementById('major').selectedIndex = 0;
            document.getElementById('batch').selectedIndex = 0;
			flushUrl();
        },
        returnPage(){
            window.location.replace("./teacQuery.html");
        },
        searchClick(){
			
			flushStudents(0,9);

        },
        seeMore(index){
            alert(1);
            // window.location.href = "./searchInformationMore.html"
            // this.text.splice(index,1)
            this.shield = true ;
            const shieldDiv = document.getElementById('shield');
            // let newText = this.text[index];
            if (this.shield == true){
                shieldDiv.innerHTML =`<table>`+
                    `<tr>`+
                    `<td>姓名</td>`+`<td>`+this.text[index].xm+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>性别</td>`+`<td>`+this.text[index].xbmc+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>考生号</td>`+`<td>`+this.text[index].ksh+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>政治身份</td>`+`<td>`+this.text[index].zzmmmc+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>民族</td>`+`<td>`+this.text[index].mzmc+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>录取学院</td>`+`<td>`+this.text[index].fyxb+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>录取专业</td>`+`<td>`+this.text[index].zymc+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>省份</td>`+`<td>`+this.text[index].sfbz+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>住址</td>`+`<td>`+this.text[index].sfbz+this.text[index].dqmc+this.text[index].jtdz+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>录取批次</td>`+`<td>`+this.text[index].pcmc+`</td>`+
                    `</tr>`+
                    `<tr>`+
                    `<td>原高中</td>`+`<td>`+this.text[index].zxmc+`</td>`+
                    `</tr>`+
                    `</table>`


            }

        },
    },

})

//一共包含的条数与目前所在的页数
function flushButtons(amount,page)
{

	var totalPage = Math.ceil(amount / 10);
	var innerHtml = "";
	if(page == 1)
	{
		innerHtml += '<li class="first disabled"><a href="javascript:void(0)">首页</a></li><li class="prev disabled"><a href="javascript:void(0)">上一页</a></li>'
	}
	else
	{
		innerHtml += '<li class="first"><a href="javascript:flushStudents(0,9)">首页</a></li><li class="prev">'
		+ '<a href="javascript:flushStudents(' + (10*(page - 1) - 10)+ ',' + (10*(page - 1) - 1) +')">上一页</a></li>'
	}
	for (var i = 1;i <= totalPage;i++)
	{
		if (i == page)
		{
			innerHtml += "<li class=\"page active\">";
			innerHtml += "<a href=\"javascript:void(0)\">" + i + "</a>";
			innerHtml += "</li>";
		}
		else{
			innerHtml += "<li class=\"page\">";
			innerHtml += "<a href=\"javascript:flushStudents("+ (10*i - 10) +"," + (10*i - 1) +")\">" + i + "</a>";
			innerHtml += "</li>";
		}
	}
	if (page == totalPage)
	{
		innerHtml += '<li class="next disabled"><a href="javascript:void(0)">下一页</a></li><li class="last disabled"><a href="javascript:void(0)">末页</a></li>'
	}
	else
	{
		innerHtml += '<li class="next"><a href="javascript:flushStudents(' + (10*(page + 1) - 10)+ ',' + (10*(page + 1) - 1)
		+')">下一页</a></li><li class="last"><a href="javascript:flushStudents(' + (totalPage*10 - 10) + ',' + (totalPage*10 - 1) + ')">末页</a></li>'
	}
	document.getElementById("buttons").innerHTML = innerHtml;
}

function flushUrl()
{
	let area = document.getElementById('area').value;				//地区
	let gender = document.getElementById('sex').value;			    //性别
	let academy = document.getElementById('academy').value;	    //学院
	let major = document.getElementById('major').value;			//专业
	let batch = document.getElementById('batch').value;			//批次
	let type = document.getElementById('class').value;			    //类别
	url = "/teacher/GetStudentFullsServlet?";
	if("null" != area && area != null)
	{
		url += "&area=" + area;
	}	
	if("null" != gender && gender != null)
	{
		url += "&gender=" + gender;
	}	
	if("null" != academy && academy != null)
	{
		url += "&academy=" + academy;
	}	
	if("null" != major && major != null)
	{
		url += "&major=" + major;
	}	
	if("null" != batch && batch != null)
	{
		url += "&batch=" + batch;
	}	
	if("null" != type && type != null)
	{
		url += "&type=" + type;
	}
	console.log(url);
	
	
}
function flushStudents(start,end)
{
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function () {
	    if (this.readyState == 4 && this.status == 200) {
	
	        var amountAndList = JSON.parse(this.responseText);
	
	        text = amountAndList.studentFulls;
	
	        amount = amountAndList.amount;
			
			flushButtons(amount,Math.floor(start / 10 + 1));

	        vm.$data.text = text;
	    }
	};
	
	xhttp.open("post", url + "&start=" + start + "&end=" + end, true);
	
	xhttp.send();
}

function getValues(id)
{
    var elementById = document.getElementById(id);
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function ()
    {
        if (this.readyState == 4 && this.status == 200)
        {
            var text = JSON.parse(this.responseText);
			// <option value="liao">辽宁</option>
			var innerHtml = "";
            innerHtml += "<option value=\"null\">--不选择--</option>"
            for(var i = 0;i < text.length;i++)
			{
				innerHtml += "<option value=\""
				+ text[i]
				+ "\">"
				+ text[i]
				+ "</option>";
			}
			elementById.innerHTML = innerHtml;
        }

    }
    xhttp.open("post", "/teacher/GetStudentValuesServlet?key=" + elementById.getAttribute("name"), true);

    xhttp.send();
}


window.onload = function(){

    document.getElementById("area").onload = getValues("area");
    document.getElementById("academy").onload = getValues("academy");
    document.getElementById("class").onload = getValues("class");
    document.getElementById("sex").onload = getValues("sex");
    document.getElementById("major").onload = getValues("major");
    document.getElementById("batch").onload = getValues("batch");

    document.getElementById("area").onchange = flushUrl;
    document.getElementById("academy").onchange = flushUrl;
    document.getElementById("class").onchange = flushUrl;
    document.getElementById("sex").onchange = flushUrl;
    document.getElementById("major").onchange = flushUrl;
    document.getElementById("batch").onchange = flushUrl;
	
	flushStudents(0,9);

}